<template>
	<!--新增界面-->
	<el-dialog title="新增菜单:" :visible.sync="dialogVisible" size="small" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="off">
		<el-form label-width="150px" :model="formData" :rules="addAgFormRules">
			<el-row :span="24">
				<el-col :span="12">
					<el-form-item prop="menuname" label="中文名称:">
						<el-input v-model="formData.menuname" size="small"></el-input>
					</el-form-item>
					<el-form-item prop="menunameen" label="英文名称:">
						<el-input v-model="formData.menunameen" size="small"></el-input>
					</el-form-item>
					<el-popover ref="popoverUrl" placement="top-start" width="200" trigger="hover" content="模板 :   /name1/name2">
					</el-popover>
					<el-form-item label="路由地址:">
						<el-input v-popover:popoverUrl v-model="formData.menuurl" size="small" :disabled="urlDisabled"></el-input>
					</el-form-item>
					<el-popover ref="popoverIcon" style="height:400px;overflow-y:auto" placement="right" width="400" trigger="click">
						<!-- <ul> -->
						<li v-for="item in iconOptions" @click="seleIcon(item.value)" :class="item.value" style="padding:10px"></li>
						<!-- </ul> -->
					</el-popover>
					<el-form-item label="图标:">
						<el-button :disabled="iconDisabled" @click="iconClick" v-popover:popoverIcon>{{iconText}}</el-button>
					</el-form-item>
					<el-form-item label="类型:">
						<el-select :disabled="isDisSeleIsleaf" size="small" v-model="formData.isleaf" @change="handleChange()">
							<el-option v-for="item in leafOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="上级菜单:">
						<el-input size="small" disabled v-model="parentLabel"></el-input>
					</el-form-item>
					<el-form-item label="stdcode:">
						<el-input size="small" v-model="formData.stdcode"></el-input>
					</el-form-item>
					<el-form-item label="orderid:">
						<el-input size="small" v-model="formData.orderid"></el-input>
					</el-form-item>
					<el-form-item label="target:">
						<el-input size="small" v-model="formData.target"></el-input>
					</el-form-item>
					<el-form-item label="是否单独创建页面">
						<el-radio-group :disabled="isDisLoadflag" v-model="formData.loadflag">
							<el-radio class="radio" label="1">是</el-radio>
							<el-radio class="radio" label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="off">取 消</el-button>
			<el-button type="success" @click="addMenu()">新 增</el-button>
		</span>
	</el-dialog>
</template>

<script>
import Icons from "../../js/production/icons";
export default {
	data() {
		return {
			iconDisabled: true,
			dialogVisible: true,
			isDisLoadflag: true,
			parentLabel: '',
			urlDisabled: false,
			formData: {
				menuid: '',
				fmenuid: '',
				menuname: '',
				menunameen: '',
				menuurl: '',
				stdcode: '',
				icon: '',
				target: '',
				isleaf: 0,
				orderid: 0,
				loadflag: '0',
			},
			leafOptions: [{
				label: '0-菜单项',
				value: 0
			}, {
				label: '1-菜单组',
				value: 1
			}
			],
			iconOptions: [],
			isDisSeleIsleaf: false,
			iconText: '未选择',
			addAgFormRules: {
				menuname: [
					{ required: true, message: '中文名称不能为空', trigger: 'blur' }
				],
				menunameen: [
					{ required: true, message: '英文名不能为空', trigger: 'blur' }
				],
			},
			splice: ''
		}
	},
	mounted() {
		if (this.$parent.rowdata.menuid == 1) {
			this.isDisSeleIsleaf = true;
			this.formData.isleaf = 1;
		}
		if (this.formData.isleaf == 1) {
			this.urlDisabled = true;
		} else {
			this.isDisLoadflag = false;
		}
		if (this.$parent.rowdata.fmenuid == 0) {
			this.iconDisabled = false;
		}
		if (this.$parent.rowdata.fmenuid != 1 && this.$parent.rowdata.isleaf == 1) {
			this.isDisSeleIsleaf = true;
		}
		this.parentLabel = this.$parent.rowdata.menuname;
		this.formData.fmenuid = this.$parent.rowdata.menuid;
		this.iconOptions = Icons.values;
	},
	methods: {
		iconClick() {
			$(".el-popover").css("height", "400px");
			$(".el-popover").css("overflow-y", "auto");
		},
		seleIcon(val) {
			this.iconText = val;
			this.formData.icon = val;
		},
		handleChange() {
			if (this.formData.isleaf == 1) {
				this.formData.menuurl = '';
				this.urlDisabled = true;
			} else {
				this.isDisLoadflag = false;
				this.formData.icon = '';
				this.urlDisabled = false;
			}
		},
		addMenu() {
			let _this = this;
			let isQuery = true;
			// 基本校验
			if (this.formData.menuname == '' || this.formData.menunameen == '') {
				_this.$message({
					type: 'error',
					message: '名字不能为空!'
				})
				isQuery = false;
			} else if (isNaN(this.formData.orderid)) {
				_this.$message({
					type: 'error',
					message: 'orderid 必须为数字!'
				})
				isQuery = false;
			} else if (this.$parent.rowdata.fmenuid == 0) {
				//一级菜单校验
				if (this.formData.icon == '') {
					_this.$message({
						type: 'error',
						message: '请选择图标!'
					})
					isQuery = false;
				}
			}

			if (isQuery) {
				$.ajax({
					type: 'POST',
					url: "/soa/menu/new",
					data: _this.formData,
					dataType: 'json',
					success: function (data) {
						if (data.state == 0) {
							_this.$parent.showAddDialog = false;
							_this.$message({
								type: 'success',
								message: '新增菜单成功!'
							})
							_this.$parent.queryTree();
						} else {
							_this.$message({
								type: 'success',
								message: '新增菜单失败!'
							})
						}
					}
				});
			}
		},
		off() {
			this.$parent.showAddDialog = false;
		}
	}
}
</script>